<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <!-- 导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>客户群群发</el-breadcrumb-item>
            </el-breadcrumb>

            <el-card class="box-card">
                <!-- 按钮 -->
                <el-button size="small" icon="el-icon-plus" type="primary" @click="currentHandler('save')">新建群发
                </el-button>

                <!--列表-->
                <el-table size="small" :data="listData" highlight-current-row v-loading="loading"
                          element-loading-text="拼命加载中" style="width: 100%;">
                    <el-table-column prop="groupMessage" label="群发内容" width="250">
                    </el-table-column>
<!--                    <el-table-column prop="groupSendType" label="群发类型" width="200">-->
<!--                    </el-table-column>-->
                    <el-table-column prop="sendTime" label="发送时间" width="250">
                    </el-table-column>
                    <el-table-column prop="sendStatus" label="发送状态" width="200">
                    </el-table-column>
                    <el-table-column  prop="empNum" label="发送人员数" width="200">
                              </el-table-column>
                    <el-table-column align="center" label="操作" min-width="250">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="alertSendHandle(scope.row)">提醒发送</el-link>
                            <el-link type="primary" @click="currentHandler('detail', scope.row)">详情</el-link>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <!-- 分页 -->
                <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                               @current-change="queryDataHandle($event,pagePagination.pageSize)"
                               :current-page="pagePagination.currentPage"
                               :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                               layout="total, sizes, prev, pager, next"
                               :total="pagePagination.total">
                </el-pagination>
            </el-card>
        </div>

        <div v-if="currentPanel == 'detail'">
            <BatchDetail @currentHandler="currentHandler" :rowId="data"></BatchDetail>
        </div>

        <div v-if="currentPanel == 'save'">
            <BatchSave @currentHandler="currentHandler"></BatchSave>
        </div>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination'
    import BatchDetail from '@/views/custGroup/batchSend/detail'
    import BatchSave from '@/views/custGroup/batchSend/save'
    import ElementUI from 'element-ui'
    // 修改 el-dialog 默认点击遮照为不关闭
    ElementUI.Dialog.props.closeOnClickModal.default = false;

    export default {
        data() {
            return {
                listData: [],
                form: {
                    status: true,
                },
                data: {
                    id: '',
                    groupName: '',
                    lordName: '',
                    groupTag: '',
                    createTime: ''
                },
                currentPanel: 'list',
                loading: false, // true显示加载


                // 分页参数
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },

                // 筛选
                formInline: {
                    page: 1,
                    limit: 10,
                    varLable: '',
                    varName: '',
                    token: localStorage.getItem('logintoken')
                },
                // 新建显示
                dialogFormVisible: false,
                // 新建表单
                saveForm: {
                    name: ''
                },

                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
            }
        },

        // 注册组件
        components: {
            Pagination,
            BatchDetail,
            BatchSave
        },

        mounted(){
            this.queryDataHandle(1, 10)
        },
        methods: {
            queryDataHandle(page = 1, row = 10) {
                let that = this
                let payload = {
                    pageNum: page,
                    pageSize: row,
                    groupSendType: '1'
                }
                this.$request("/api/groupMessage/getAllMessage/1_0", payload, "POST").then((data) => {
                    that.listData = data.rows
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = data.row
                })
            },

            alertSendHandle(data) {
                let requestBody = {
                    touser: data.sendEmpId,
                    msgtype: "text",
                    text: {content: "请处理群发任务"}
                }

                this.$request("/api/wechat/sendMessageForApp", {requestJson:JSON.stringify(requestBody)}, "POST").then((data) => {
                    this.$message.success("提醒成功")
                });
            },

            // 分页插件事件
            callFather(parm) {
                this.formInline.page = parm.currentPage
                this.formInline.limit = parm.pageSize
                this.getdata(this.formInline)
            },
            // 详情页  ,params:{groupId:123456789}
            currentHandler(current, row) {
                this.data = row
                this.currentPanel = current
                if(current == 'list'){
                    this.queryDataHandle(1, 10)
                }
            },
        }
    }
</script>

<style scoped>
    .el-input {
        width: 60%;
    }

    ul li {
        list-style: none;
        padding: 10px;
        margin: 15px 0;
    }

    img {
        width: 100px;
        height: 100px;
        border-radius: 3px;
    }

    .title {
        font-size: 20px;
    }

    ul li:nth-child(2) {
        background: rgb(230, 247, 255);
    }

    .tu {
        align-content: center;
    }

    .twoUl li:nth-child(3) {
        background: rgb(249, 249, 249)
    }

    .twoUl li:nth-child(4) {
        background: rgb(249, 249, 249)
    }

    .el-card {
        margin-top: 30px;
    }

    .el-link {
        margin: 0 20px;
    }

    .el-input--prefix .el-input__inner {
        width: 100px;
    }
</style>
